<template>
  <div class="page-wrapper">
    <div class="operation-btn-wrapper">
      <el-button @click="goBack">返回</el-button>
    </div>
    <el-radio-group v-model="currentPlatform">
      <el-radio-button type="info" v-for="item in platformList" :label="item.code" :key="item.code">{{item.message}}</el-radio-button>
    </el-radio-group>
    <div style="margin: 10px 0;">
      <el-table size="mini" :data="groupList" border style="width: 100%">
        <el-table-column prop="message" label="分组名称">
        </el-table-column>
        <el-table-column prop="alias" label="分组别名">
        </el-table-column>
        <el-table-column label="分组新别名">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.newAlias" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="goToSave(scope)">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getGroupList, setGroupList } from './group-help'
import { platformList } from '@/views/common.js'

export default {
  data () {
    return {
      groupList: [],
      groupNewName: [],
      currentPlatform: 1,
      platformList
    }
  },

  watch: {
    currentPlatform (val) {
      this.getGroupByPlatform(val)
    }
  },

  created () {
    this.getGroupListFromJson()
  },

  methods: {
    getGroupByPlatform () {
      this.getGroupListFromJson()
    },
    goToSave (scope) {
      const { row, $index } = scope
      if (!row.newAlias) {
        return this.$message.error('新别名不能为空')
      }
      this.groupList[$index].alias = row.newAlias
      row.newAlias = ''
      setGroupList(this.currentPlatform, this.groupList)
      this.getGroupListFromJson()
      this.$message.success('保存成功')
      console.log(scope)
      console.log($index)
    },
    getGroupListFromJson () {
      const data = getGroupList(this.currentPlatform)
      this.groupList = data
    },
    goBack () {
      this.$router.push({
        name: 'Home'
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.page-wrapper {
  padding: 10px 20px;
}

.operation-btn-wrapper {
  display: flex;
  padding: 15px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
}

.group-name-label {
  font-size: 15px;
  font-weight: 500;
}

.group-value {
  color: #606266;
  font-size: 14px;
}
</style>
